import Vue from 'vue'
import VueRouter from 'vue-router'
//import navData from '@/utils/navData'
import { getNavdata } from '@/utils/http'
import store from '@/store'   //减少请求，缓存数据
Vue.use(VueRouter)

// let routes = [];
const routes = [
  {
    path: '/',
    redirect:'/home'
  },
];
//根据数据动态生成路由
// navData.forEach(item => {
//   routes.push({
//     path: item.path,
//     name: item.name,
//     meta: { title: item.title },
//     component: () => import( '../views/rightMain/content/'+item.component)
//   },)
// })

// const router = new VueRouter({
//   linkActiveClass:'selected',
//   routes
// })

// export default router
const router = new VueRouter({
  linkActiveClass:'selected',
  routes
})

// //路由拦截   /*在跳转之前执行*/
// // beforeEach函数有三个参数：
// // to:router即将进入的路由对象
// // from:当前导航即将离开的路由
// // next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
// // afterEach函数不用传next()函数
// //路由拦截
router.beforeEach((to, from, next)=>{
  addRoutesData()
  next()
})

function addRoutesData() {
  //根据数据动态生成路由
  getNavdata().then(res=>{
    // 添加动态路由
    let dynamicRoutes = addDynamicRoutes(res.data.result);
    // 保存加载状态
    //store.commit('setNav', res.data.result);//直接通过commit来操作state
    store.dispatch('SETNAV',res.data.result); //通过dispatch来操作actions
    router.addRoutes(dynamicRoutes); 
    //vue-router官方提供的一个api-->addRoutes可以实现路由添加的功能,事实上就也就实现了用户权限
  })
}
//路由数据拼接
function addDynamicRoutes(result) {
  result.forEach(item => {
    routes.push({
      path: item.path,
      name: item.name,
      meta: { title: item.title },
      component: () => import( '../views/rightMain/content/'+item.component)
    },)
  })
  return routes;
}

export default router


// //路由拦截
// router.beforeEach((to,from,next)=>{
//   addRoutes()
//   next()
// })
// //动态生成路由数据
// function addRoutes(){
//   getNavData().then(res=>{
//     //添加数据
//     var data = routesData(res.data.result);
//     store.dispatch('SETNAV',res.data.result); //减少请求，数据缓存
//     router.addRoutes(data);  //动态添加路由数据
//   })
// }

// //路由数据
// function routesData(result){
//   result.forEach(item=>{
//     routes.push({
//       path: item.path,
//       name: item.name,
//       meta: { title: item.title },
//       component: () => import('../views/rightMain/content/'+item.component)
//     })
//   })
//   return routes
// }

